<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt qw-form-card">
			<!-- 自定义筛选项 start  -->
			<table-form :dynamicData="dynamicData" @on-submit="getData" @on-reset="getData">
					<div v-for="(item, index) in dynamicData.formSlots" :key="index" :slot="item.slotName">
							<async-load-comp :asyncData="item.slotData" />
					</div>
			</table-form>
			<!-- 自定义筛选项 end  -->
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 调用表格子组件 start  -->
			<table-list ref="table" :dynamicData="dynamicData" :pagePath="pagePath" />
			<!-- 调用表格子组件 end  -->
		</Card>
	</div>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	import tableForm from '@/components/common/baseForm'; // 表单组件
	import tableList from './comps/baseTable'; // 表格组件
	import asyncLoadComp from '@/components/common/asyncLoadComp'; // 动态导入组件

	export default {
		components: {
			tableForm,
			tableList,
			asyncLoadComp
		},
		data() {
			return {
				dynamicData: {},
				pagePath: '' // 当前路由
			}
		},
		computed: {
			...mapState('admin/baseList', [
				'listData',
				'formItemData',
				'formItemDataRules'
			])
		},
		created() {
			this.getConfigData();
		},
		mounted() {
			this.getData();
		},
		methods: {
			...mapMutations('admin/baseList', [
				'setListData',
				'setFormItemData',
				'setFormItemDataRules'
			]),
			// 获取表格数据
			getData(formData) {
				this.$refs.table.getData(formData);
			},
			// 获取初始配置信息
			getConfigData() {
				this.pagePath = this.$route.path;
				let dynamicData = require('./configjs/sellingPriceList').default;
				this.$set(this.$data, 'dynamicData', dynamicData);
				this.setListData(dynamicData)
				this.setFormItemData(dynamicData.formData)
				this.setFormItemDataRules(dynamicData.formDataRules)
			}
		}
	}
</script>